<!--
 * @Author: Betty
 * @Date: 2020-11-07 11:55:57
 * @LastEditors: Betty
 * @LastEditTime: 2020-11-10 22:47:55
 * @Description: 下拉框组件
-->
<template>
  <!-- html的代码从bootstrap的下拉框组件中拷过来 -->
  <!-- 下拉框默认是隐藏的，我们让它出现，然后用v-if来控制 -->
  <div class="dropdown" ref="dropdownRef">
    <!-- 下拉框里面的内容变成是传入的文字，所以删掉原来的东西 -->
    <a href="#" class="btn btn-outline-light my-2 dropdown-toggle" @click.prevent="toggle">{{ title }}</a>
    <!-- 要显示隐藏的是ul，而控制显示隐藏的东西是a链接，a链接绑定点击事件的时候要加.prevent取消默认行为 -->
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton" :style="{display: 'block'}" v-if="isOpen">
      <slot></slot>
      <!-- 下拉框里的内容需要外面传入，所以应该要能往里传东西，所以我们设置一个插槽在这里 -->
    </ul>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref, watch } from 'vue'
import useClickOutside from '../hooks/useClickOutside'
export default defineComponent({
  name: 'Dropdown',
  props: {
    // 这里的title是父组件传入的按钮的文字，可能是头部组件传入的你好某某
    title: {
      type: String,
      required: true
    }
  },
  setup() {
    const dropdownRef = ref<HTMLElement | null>(null)
    // 定义一个控制下拉菜单显示隐藏的ref对象
    const isOpen = ref(false)
    // 定义一个方法来控制ref对象的取反
    const toggle = () => {
      isOpen.value = !isOpen.value
      console.log(isOpen.value)
    }
    // 判断我点击的地方是否在dropdown里面，对这个函数调用的结果进行监听。判断下拉框是否显示，都满足才能让下拉框隐藏
    const isClickOutside = useClickOutside(dropdownRef)
    watch(isClickOutside, () => {
      // 这里是要判断返回来的ref对象的值是否为false，而不是判断这个对象本身
      if (isClickOutside.value && isOpen.value) {
        isOpen.value = false
      }
    })
    return {
      isOpen,
      toggle,
      dropdownRef
    }
  }
})
</script>

<style>
</style>
